<template>
  <div class="dashboard-container">
    <div class="page-title">仪表盘</div>
    
    <el-row :gutter="20" class="dashboard-stats">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalMembers }}</div>
              <div class="stat-label">总会员数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon><ShoppingBag /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalProjects }}</div>
              <div class="stat-label">美容项目</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon><Goods /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalProducts }}</div>
              <div class="stat-label">产品总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">¥{{ stats.todaySales }}</div>
              <div class="stat-label">今日销售额</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card title="最近预约">
          <template #header>
            <div class="card-header">
              <span>最近预约</span>
              <el-button type="primary" text @click="$router.push('/appointments')">
                查看全部
              </el-button>
            </div>
          </template>
          <el-table :data="recentAppointments" style="width: 100%">
            <el-table-column prop="memberName" label="会员姓名" />
            <el-table-column prop="projectName" label="项目" />
            <el-table-column prop="appointmentTime" label="时间">
              <template #default="{ row }">
                {{ formatDate(row.appointmentTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)" :color="getStatusColor(row.status)">
                  {{ getStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card title="销售统计">
          <template #header>
            <div class="card-header">
              <span>销售统计</span>
              <el-button type="primary" text @click="$router.push('/sales')">
                查看全部
              </el-button>
            </div>
          </template>
          <div style="height: 300px">
            <el-empty description="暂无数据" v-if="!salesChartData.length" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'

const stats = ref({
  totalMembers: 156,
  totalProjects: 12,
  totalProducts: 45,
  todaySales: 2840
})

const recentAppointments = ref([
  {
    memberName: '张三',
    projectName: '面部护理',
    appointmentTime: '2024-01-15 14:00',
    status: 'confirmed'
  },
  {
    memberName: '李四',
    projectName: '身体按摩',
    appointmentTime: '2024-01-15 15:30',
    status: 'pending'
  },
  {
    memberName: '王五',
    projectName: '美甲服务',
    appointmentTime: '2024-01-15 16:00',
    status: 'completed'
  }
])

const salesChartData = ref([])

const formatDate = (date: string) => {
  return dayjs(date).format('MM-DD HH:mm')
}

const getStatusType = (status: string) => {
  const map: Record<string, string> = {
    pending: 'warning',
    confirmed: 'success',
    completed: 'info',
    cancelled: 'danger'
  }
  return map[status] || 'info'
}

const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    pending: '#F5C762',
    confirmed: '#F0B030',
    completed: '#E09B2F',
    cancelled: '#FF6B6B'
  }
  return colorMap[status] || '#F0B030'
}

const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    pending: '待确认',
    confirmed: '已确认',
    completed: '已完成',
    cancelled: '已取消'
  }
  return map[status] || status
}

onMounted(() => {
  // 这里可以加载真实的统计数据
})
</script>

<style scoped>
.dashboard-container {
  padding: 0;
}

.dashboard-stats {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(240, 176, 48, 0.15);
  border: 1px solid rgba(240, 176, 48, 0.2);
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  font-size: 48px;
  color: #F0B030;
  margin-right: 20px;
  background: linear-gradient(135deg, #F0B030, #E09B2F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #F0B030;
  margin-bottom: 20px;
}
</style>